import React, { useEffect, useState } from "react";
import './App.css'
import axios from "axios";

function App() {
    const [food, setFood] = useState([])

    const getList = async () => {
        let res = await axios.get('http://localhost:3000/list')
        setFood(res.data.data)
    }

    useEffect(() => {
        getList()
    }, [])

    
    return (
        <div className="big_d">
            <table className="tab1" cellPadding={'0'} cellSpacing={'0'}>
                <tr height={"50px"} className="tr1">
                    <td width={"200px"}><input type="checkbox"></input>全选</td>
                    <td width={"500px"}>商品</td>
                    <td width={"150px"}>单价</td>
                    <td width={"150px"}>数量</td>
                    <td width={"150px"}>小计</td>
                    <td width={"150px"}>操作</td>
                </tr>
                {
                    food.map((item,index) => {
                        return(
                            <tr height={'100px'}>
                                <td><input type="checkbox"></input><img src={item.imgs} width={'70px'} height={'70px'}></img></td>
                                <td>{item.name}</td>
                                <td>￥{item.price}</td>
                                <td><button>-</button> {item.nums} <button>+</button></td>
                                <td className="td1">￥{item.price * item.nums}</td>
                                <td>
                                    <span>删除 </span>
                                    <span>移入关注</span>
                                </td>
                            </tr>
                        )
                    })
                }
            </table>
        </div>
    )
}

export default App